<template>
	<view class="container">
		<!-- 标题 -->
		<!-- <CustomNavbar title="我的团队">
		</CustomNavbar> -->
		<!-- 列表 -->
		<!-- <view class="team-list">
	<view class="team-item" v-for="(item,index) in teamList" :key="index">
		 <image :src="item.image" mode="widthFix"></image>
		 <view class="info">
		 	<text class="name">{{item.name}}</text>
			<text>{{item.time}}</text>
		 </view>
	 </view>
    </view> -->
		<view class="fans-list">
			<view class="title">
				<view class="tabs flex-between">
					<view class="tab" :class="{'active':index==tabIndex}" v-for="(item,index) in tabs" :key="index"
						@click="tabSelect(index)">
						{{item}}
					</view>

				</view>
			</view>
			<scroll-view scroll-y :style="{height: scrollHeight + 'px'}" @scrolltolower="loadMore"
				:lower-threshold="100">
				<view v-if="list.length > 0">
					<view class="list flex-between" v-for="(item,index) in list" :key="index"
						@click="toInfo(item,index)">
						<view class="left">
							<image :src="item.avatar || '/static/index_slices/avatar.png'" mode=""></image>
							<text>{{item.nickname}}</text>
						</view>
						<view class="right">
							{{item.createtime}}
						</view>
					</view>
					<!-- 加载状态提示 -->
					<view class="loading-status">
						<text v-if="loading">加载中...</text>
						<text v-else-if="noMore">没有更多了</text>
					</view>
				</view>
				<view class="null_box" v-else>暂无数据</view>
			</scroll-view>
		</view>

	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted
	} from 'vue';
	import CustomNavbar from '@/components/CustomNavbar.vue';
	const page = ref(1)
	const last_page = ref(1)


	// 粉丝列表
	const tabs = reactive(['直推粉丝 ', '间推粉丝'])
	const tabIndex = ref(0)
	// 防抖计时器
	let debounceTimer = null
	// 获取屏幕高度计算scroll-view高度
	const scrollHeight = ref(0)
	// 数据列表
	const list = ref([])
	// 当前页码
	const currentPage = ref(1)
	// 是否正在加载
	const loading = ref(false)
	// 是否没有更多数据
	const noMore = ref(false)

	onMounted(() => {
		// 计算scroll-view高度
		calcScrollHeight()
		// 初始加载数据
		loadData()
	})
	// 加载数据
	const loadData = async () => {
		if (loading.value || noMore.value) return

		// 防抖处理
		if (debounceTimer) {
			clearTimeout(debounceTimer)
		}

		debounceTimer = setTimeout(async () => {
			loading.value = true

			try {
				await uni.$api.user.teamList({
					type: tabIndex.value + 1,
					page: currentPage.value
				}).then(res => {
					if (res.data.data.length > 0) {
						list.value = [...list.value, ...res.data.data]
						currentPage.value++
					} else {
						noMore.value = true
					}
				})


			} catch (error) {
				console.error('加载数据失败:', error)
				uni.showToast({
					title: '加载失败',
					icon: 'none'
				})
			} finally {
				loading.value = false
				debounceTimer = null
			}
		}, 300)
	}

	// 上拉加载更多
	const loadMore = () => {
		loadData()
	}

	const tabSelect = (index) => {
		tabIndex.value = index
		loading.value = false;
		noMore.value = false;
		currentPage.value = 1;
		list.value = []
		loadData()
	}
	// 计算scroll-view高度
	const calcScrollHeight = () => {
		uni.getSystemInfo({
			success: (res) => {
				scrollHeight.value = res.windowHeight - 50 - 180 // 减去顶部导航栏高度
			}
		})
	}
	const toInfo = (item, index) => {
		uni.navigateTo({
			url: '/pages/my/info'
		})
	}
</script>

<style lang="scss" scoped>
	page {

		background: #FF413B;
	}

	.container {
		background-size: 100% auto;
		padding-top: 2rpx;
		padding-bottom: 40rpx;

		.team-list {
			background-color: #fff;
			border-radius: 26rpx 26rpx 0 0;
			padding: 61rpx 30rpx 100rpx;

			.team-item {
				display: flex;
				align-items: center;
				margin-bottom: 40rpx;

				image {
					width: 118rpx;
					margin-right: 21rpx;
				}

				.info {
					display: flex;
					flex-direction: column;
					font-size: 22rpx;
					color: #71719B;

					.name {
						color: #212F45;
						font-size: 30rpx;
						font-weight: bold;
						margin-bottom: 16rpx;
					}
				}
			}
		}

		.fans-list {
			margin: 53rpx 30rpx;
			background-color: #FFF9EF;
			border-radius: 26rpx;
			padding: 52rpx 46rpx 18rpx 56rpx;

			.tabs {
				width: 480rpx;
				height: 82rpx;
				background: url('/otherPages/static/btn2_bg.png') no-repeat;
				background-size: 100%;
				margin: 0 auto;

				.tab {
					width: 240rpx;
					line-height: 82rpx;
					color: #fff;
					text-align: center;

					&.active {
						background: url('/otherPages/static/btn3_bg.png') no-repeat;
						background-size: 100%;
					}
				}
			}

			.list {
				color: #222222;
				margin-top: 46rpx;

				.left {
					display: flex;
					align-items: center;
					font-size: 30rpx;

					image {
						width: 108rpx;
						height: 108rpx;
						border-radius: 50%;
						margin-right: 35rpx;
					}
				}

				.right {
					font-size: 24rpx;
				}
			}
		}
		.null_box{
			text-align: center;
			height: 30vh;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 38rpx;
			color: #999;
		}

	}

	.loading-status {
		text-align: center;
		padding: 20rpx 0;
		font-size: 30rpx;
		color: #959595;
	}
</style>